<!--本文件由FirstUI授权予关赛川（手机号： 1 5  60  05 1  520 5，身份证尾号：22 6  5 1 9）专用，请尊重知识产权，勿私下传播，违者追究法律责任。-->
<template>
	<view class="payCont">
		<!-- :style="{background:isOverdue?'#E3E3E3':'#fff'}" -->
		<view class="contA marin25" :class="[isOverdue?'contOver':'contA']" v-for="(item,index) in 3" :key='index'>
			<view class="cont-item">
				<view class="cont-text">
					<text class='text-name'>酒店民宿在线支付红包</text>
					<text class='text-price'>¥128.00</text>
				</view>
				<view class="cont-time">
					<text class='c-time'>7天后过期</text>
					<image v-if="isOverdue" class='c-img' :src="baseOssUrl+ 'icon/guoqi.png' " mode=""></image>
					<fui-button v-else text="去使用" background="#AE1824" width='140rpx' height='54rpx' :margin="['0', '5rpx']" radius='50rpx'
					 @click="pricePopup" size="24"></fui-button>
				</view>
			</view>

			<view class="buy-code">
				<view class="yuan1">

				</view>
				<view class="yuan2">

				</view>
			</view>
		</view>
		<!-- 到底了 -->
		<view class="theEnd">
			没有更多红包了
		</view>




	</view>
</template>

<script>
	import {
		baseOssUrl
	} from '@/common/settings';
	import {
		mapState,
		mapMutations
	} from 'vuex';
	export default {
		data() {
			return {
				baseOssUrl: baseOssUrl,
				isOverdue: false,
			}
		},
		onLoad() {

		},
		methods: {
			leftClick() {
				uni.navigateBack({
					delta: 1
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.payCont {
		height: 100vh;
		background: #EFEFEF;
		padding-top: 24rpx;

		.contOver {
			// background:#E3E3E3;
			background: red;
		}

		.contA {
			background: #FFFFFF;
			border-radius: 16rpx;
			padding: 24rpx;
			position: relative;
			margin-bottom: 24rpx;

			.cont-item {
				.cont-text {
					display: flex;
					justify-content: space-between;
					margin-bottom: 18rpx;

					.text-name {
						font-size: 30rpx;
						font-weight: bold;
					}

					.text-price {
						color: #AE1824;
						font-size: 40rpx;
					}
				}

				.cont-time {
					display: flex;
					justify-content: space-between;

					.c-time {
						font-size: 26rpx;
						color: #696869;
					}

					.c-img {
						width: 134rpx;
						height: 100rpx;
					}
				}
			}

			.buy-code {
				.yuan1 {
					position: absolute;
					top: 40%;
					left: -25rpx;
					background-color: #EFEFEF;
					border-radius: 50%;
					width: 36rpx;
					height: 36rpx;
				}

				.yuan2 {
					position: absolute;
					top: 40%;
					right: -25rpx;
					background-color: #EFEFEF;
					border-radius: 50%;
					width: 36rpx;
					height: 36rpx;
				}

			}

		}

		.theEnd {
			color: #8E8E8E;
			font-size: 24rpx;
			display: flex;
			justify-content: center;
			margin-top: 32rpx;
		}




	}
</style>
